<template>
  <div id="abShou">
    <div class="sQuery">
      <div class="sTitle homeTitle">
        <span>异常业务预警条目展示</span>
        <el-input placeholder="搜索行社机构" v-model="search" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="getdata(1)"></el-button>
        </el-input>
      </div>
      <div class="queryCon">
        <div class="qSeles">
          <!-- 两个选择 -->
          <div class="xuanze">
            <div class="xuanzeCon">
              <span>选择行社\机构：</span>
              <!-- <el-input v-model="banks" placeholder="点击进行多选" size="mini"></el-input> -->
              <el-tooltip :content="banks? banks: '未选择任何行社/机构'" placement="top">
                <el-button size="small" @click="morechoose">点击进行多选</el-button>
              </el-tooltip>
            </div>
            <div class="xuanzeCon">
              <span>我关注的：</span>
              <el-select v-model="isFocus" placeholder="请选择" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
          <!-- 异常业务类型 -->
          <div class="leixing">
            <div>
              <span>异常业务类型：</span>
            </div>
            <div class="qiek">
              <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
                <el-checkbox v-for="city in cities" :label="city" :key="city" border size="small">{{city}}</el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <!-- 时间轴 -->
          <div class="timezhou">
            <div class="timetitle">时间轴：</div>
            <div class="block">
              <el-slider v-model="time" :min="1" :max="60" :format-tooltip="formatTooltip"></el-slider>
            </div>
          </div>
          <!-- 按钮 -->
          <div class="btnAb">
            <el-button type="primary" size="small" @click="queryReset">重置查询条件</el-button>
            <el-button type="primary" size="small" @click="getdata(1)">查询</el-button>
            <el-button type="primary" size="small" @click="tongbu">同步数据</el-button>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="tablebg">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="spotDate" label="预警日期"  align="center"></el-table-column>
          <el-table-column prop="bankName" label="预警行社\机构" align="center"></el-table-column>
          <el-table-column prop="descData" label="描述" align="center" min-width='350px;'></el-table-column>
          <el-table-column label="异常业务类型" align="center">
            <template slot-scope="scope">
              <span>
                {{scope.row.mainTypeOne}}<span v-if="scope.row.mainTypeTwo">,</span>{{scope.row.mainTypeTwo}}
              </span>
            </template>
          </el-table-column>
          <el-table-column  label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button size="mini" v-if="scope.row.isFocus == 0" @click="setFocus(scope.row,1)">关注</el-button>
              <el-button size="mini" v-else @click="setFocus(scope.row,0)">取消关注</el-button>
              <el-button size="mini" @click="look(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pgfy">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "abShou",
  props: ['isDetail'],
  data() {
    return {
      // 行设机构
      banksArr: [],
      banks: '',
      banksId: [],
      banks: "",
      search: "",
      options: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "已关注",
          label: "已关注"
        },
        {
          value: "未关注",
          label: "未关注"
        }
      ],
      // 我关注的
      isFocus: "",
      // 选中的异常业务类型
      checkedCities: [
        '疑似虚增负债',
        '疑似资产出表',
        '疑似资产代持',
        '疑似违规投资'
      ],
      cities: [
        '疑似虚增负债',
        '疑似资产出表',
        '疑似资产代持',
        '疑似违规投资'
      ],
      // 时间轴
      time: 7,
      // 表格
      tableData: [],
      // 分页
      currentPage: 1,
      total: null,
      obj: {}
    };
  },
  beforeDestroy: function() {
    this.$bus.$emit("chooseBank");
  },
  mounted () {
    setTimeout(()=>{
      if(this.isDetail) {
        this.paramsGetdata();
      } else {
        this.getdata(1)
      }
    }, 20);
    this.getdata(1);
  },
  methods: {
    tongbu () {
      const loading = this.$loading({
          lock: true,
          text: '正在同步数据中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
      this.axios.get('unusualWarn/detectSuspect')
        .then(({data})=> {
          if (data.code == 200) {
            loading.close();
            this.$message({message: '检测完成',type: 'success'});
          }
        })
    },
    setFocus (row,val) {
      this.axios.post('unusualWarn/setFocus',{warnId: row.warnId, state: val})
        .then(({data})=> {
          if(val==1) row.isFocus = 1;
          if(val==0) row.isFocus = 0;
          this.$message({message: '设置成功',type: 'success'});
        })
    },
    getdata (val) {
      this.currentPage = val;
      let obj = {
        bankName: this.search,
        isFocus: this.isFocus,
        bankNameList: this.banksArr,
        typeList: this.checkedCities,
        day: this.time,
        pageInfo: this.currentPage,
      };
      console.log(obj);
      this.obj = obj;
      this.axios.post('unusualWarn/query', this.filterNoneObj(obj))
        .then(({data})=> {
          this.tableData = data.data;
          this.total = data.pageInfo.total;
        })
    },
    paramsGetdata() {
      let obj = JSON.parse(sessionStorage.getItem('abshowParams'));
      this.obj = obj;
      this.search = obj.bankName;
      this.isFocus = obj.isFocus;
      this.banksArr = obj.bankNameList;
      this.checkedCities = obj.typeList;
      this.time = obj.day;
      this.currentPage = obj.pageInfo;
      this.banks = this.banksArr.join(',');
      // this.banks = obj.bankNameList.join(',');
      this.axios.post('unusualWarn/query', this.filterNoneObj(obj))
        .then(({data})=> {
          this.tableData = data.data;
          this.total = data.pageInfo.total;
        })
    },
    look (row) {
      sessionStorage.setItem('abshowParams', JSON.stringify(this.obj));
      this.$router.push({path: 'abnormaldetail', query: {id: row.warnId}});
    },
    // 时间滑块
    formatTooltip(val) {
      return `近${val}天`;
    },
    morechoose() {
      this.$bus.$emit("chooseBank", {
        callback: (banks) => {
          let banksName = [];
          let banksId = [];
          banks.forEach((item, index) => {
            banksName.push(item.bName);
            banksId.push(item.bId);
          });
          this.banksArr = banksName;
          this.banks = banksName.join(',');
          this.banksId = banksId;
        }
      });
    },
    // 多选框筛选
    handleCheckedCitiesChange(value) {
      console.log(value);
    },
    // 重置查询条件
    queryReset () {
      this.banks = '';
      this.value = '';
      this.checkedCities = this.cities;
      this.time = 7;
      this.isFocus = '',
      this.search = ''
    },
     // 分页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getdata(val);
    },
  }
};
</script>

<style lang="scss">
#abShou {
  .sQuery {
    // background-color: rgba(255, 255, 255, 1);
    .sTitle {
      margin-top: 40px;
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      border-bottom: 1px solid #000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .el-input {
        width: 400px;
        margin-right: 20px;
      }
    }
    .queryCon {
      padding: 20px 20px;
      background:rgba(255,255,255, 0.65)!important;
      .qSeles {
        .xuanze {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          margin-top: 10px;
          .xuanzeCon {
            height: 40px;
            display: flex;
            align-items: center;
            margin-right: 30px;
            .el-input {
              width: 300px;
            }
          }
        }
        .leixing {
          margin-top: 15px;
          .qiek {
            .el-checkbox {
              margin-top: 10px;
              margin-left: 0;
              margin-right: 20px;
            }
          }
        }
        .timezhou {
          margin-top: 20px;
          .el-slider__runway {
            background-color: #c0c2c4;
          }
        }
        .btnAb {
          margin-top: 30px;
          .el-button {
            margin-right: 30px;
          }
        }
      }
    }
    .tablebg {
      padding: 20px;
      padding-top: 10px;
    }
    .pgfy {
      padding: 20px;
      text-align: right;
    }
  }
}
</style>
